import Vue from 'vue'

// 这个第三方包的作用就是设置基础样式
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

// 导入饿了么UI
import ElementUI from 'element-ui'
// 导入饿了么UI的样式
import 'element-ui/lib/theme-chalk/index.css'
// 导入饿了么UI英语语言包
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

// 导入全局样式
import '@/styles/index.scss' // global css

// 导入主组件
import App from './App'
// 导入store和路由
import store from './store'
import router from './router'

import i18n from '@/i18n'

// 导入图标
import '@/icons' // icon
// 导入权限有关代码的文件
import '@/permission' // permission control
// 导入过滤器
import '@/filters'

Vue.mixin({
  methods: {
    CHECK_POINT(point) {
      return store.getters.userInfo.roles.points.includes(point)
    }
  }
})

// 设置饿了么的语言为英文
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
// 要不要在控制打一句废话
Vue.config.productionTip = false

// 以后我要封装十个，我就要导入和注册代码写10次
// 甚至如果这些组件另外一个项目也要用，那我也要继续写10次
// 麻烦，所以像element-ui这种组件库，它的组件更多
// 如果要用100个，你每个项目就要导入100次才能全部用上，麻烦
// 所以作者全部把注册组件的代码封装到install方法里
// 那对于使用者而言就只要写1句话，Vue.use就能注册好全部组件
import cmt from '@/components'
Vue.use(cmt)

// 全局自定义指令 -- 就会多一个自定义指令
// 参数1：指令名
// 参数2：绑定指令会调用的回调函数
//  回调函数里有两个参数
// 参数1:一般叫el， 是绑定指令的dom元素
// 参数2：是一个对象，里面有指令的相关信息，例如指令名和指令的写法和指令绑定的值（value）
Vue.directive('imgerr', (el, obj) => {
  // 绑定指令的dom元素
  // console.log(el)
  // 指令的相关信息
  // console.log(obj)
  // 要么报错给默认图片，要么不报错但是src为空也给默认图片
  if (!el.src) {
    el.src = obj.value
    return
  }

  // 谁用了这个指令，就要让它拥有一个功能：能加载图片就加载，不能加载就给默认图片
  el.addEventListener('error', function() {
    el.src = obj.value
  })
})

// Vue.use让你传入一个对象或者传入一个函数
// 如果传入对象，会调用这个对象的install方法，如果传入函数就是调用这个函数
// Vue.use在调用这些方法的时候还会把Vue这个构造函数传到方法里作为参数
// Vue.use好无聊啊，到底有什么用呢？
// element-ui提供的东西都叫组件，它提供组件所有地方都能用，所以说明，他们的组件是全局组件
// 对于使用者而言极其方便，只要用一句话： Vue.use() 就一下子注册了所有全局组件

/*
const obj = {
  name: 'jack',
  install(Vue) {
    console.log('obj的install调用了', Vue)
  }
}

Vue.use(obj)

function fn(Vue) {
  console.log('我是方可欣', Vue)
}
Vue.use(fn)
*/

// new Vue必须保证放到`main.js`的最后
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})
